<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频审核</title>
    <script src="layui-v2.5.6\layui\layui.js" charset="utf-8"></script>
    <link href=" https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
    <link rel="stylesheet" type="text/css" href="bootstrap\bootstrap.min.css"/>
    <script src="bootstrap\jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\popper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="vue\axios.js"></script>
    <script src="vue\Vue.js"></script>
</head>
<body>
<div id="app" class="container" style="margin-top: 50px">
    <table class="table table-striped text-center table-hover table-bordered text" id="table">
        <thead>
        <tr class="text-info" style="font-size: 12px;">
            <th>知识点</th>
            <th>教师</th>
            <th>发布时间</th>
            <th>内容</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="text-muted" style="font-size: 12px;" >
        <tr v-for="vedio in knowledgepoints.list">
            <td>{{vedio.knowledge}}</td>
            <td>{{vedio.teacherInfo.name}}</td>
            <td>{{vedio.date}}</td>
            <td>{{vedio.content}}</td>
            <td>
                <button type="button" class="btn btn-outline-info btn-sm" @click="examine(vedio.vid)">查看</button><br>
            </td>
        </tr>
        </tbody>
    </table>

    <nav aria-label="Page navigation example" style="text-align:center;" >
        <ul class="pagination" >
            <li class="page-item">
                <label class="page-link" @click="firstPage(1)">首页</label>
            </li>

            <li class="page-item active" v-for="navigatepageNum in knowledgepoints.navigatepageNums" v-if="navigatepageNum == knowledgepoints.pageNum">
                <label class="page-link" @click="currentPage(navigatepageNum)">{{navigatepageNum}}</label>
            </li>
            <li class="page-item" v-else>
                <label class="page-link" @click="currentPage(navigatepageNum)">{{navigatepageNum}}</label>
            </li>

            <li class="page-item " >
                <label class="page-link" @click="lastPage(knowledgepoints.pages)">末页</label>
            </li>
        </ul>
    </nav>
</div>

</body>
<script>
    layui.use('layer',function () {
        var layer = layui.layer;
    });


    new Vue({
        el:"#app"
        ,data:{
            vedios:[],
            knowledgepoints:"",
        }
        ,mounted(){
            axios
                .get("audit/selectVideoAll")
                .then(res =>{

                    this.knowledgepoints = res.data.data
                    console.log(this.knowledgepoints);
                });
        }
        ,methods:{
            lastPage:function(pn){
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("audit/selectVideoAll",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                        console.info(this.knowledgepoints)
                    });
            },

            firstPage:function (pn) {
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("audit/selectVideoAll",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                        console.info(this.knowledgepoints)
                    });
            },
            currentPage:function(pn){
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("audit/selectVideoAll",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                        console.info(this.knowledgepoints)
                    });
            },
            examine:function (vid) {
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['1000px', '500px'], //宽高
                    time :1000000,
                    anim :5,
                    resize :true,
                    shade: [0.8, '#393D49'],
                    content:'examineVideo.html?vid='+vid,
                });
            }
        }
    });

</script>
</html>